<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Autocomplete</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type='text/javascript'
	src='js/jquery-autocomplete/lib/jquery.bgiframe.min.js'></script>
<!--<script type='text/javascript' src='../js/jquery-autocomplete/lib/jquery.ajaxQueue.js'></script>-->
<script type='text/javascript'
	src='js/jquery-autocomplete/jquery.autocomplete.js'></script>
<link rel="stylesheet" type="text/css" href="css/autocomplete.css" />
<link rel="stylesheet" type="text/css"
	href="js/jquery-autocomplete/jquery.autocomplete.css" />
</head>
<body>
<fieldset><legend>Cachead data från webbservice</legend>
<table>
	<tr>
		<td><label for="country">Land: </label></td>
		<td><input type="text" id="country" /></td>
	</tr>
	<tr>
		<td><label for="countrySWE">Land (svenska): </label></td>
		<td><input type="text" id="countrySWE" /></td>
	</tr>
	<tr>
		<td><label for="continent">Kontinent: </label></td>
		<td><input type="text" id="continent" /></td>
	</tr>
	<tr>
		<td><label for="continentSWE">Kontinent (svenska): </label></td>
		<td><input type="text" id="continentSWE" /></td>
	</tr>
</table>
</fieldset>
<fieldset><legend>"Live" mot webbservice</legend> <label
	for="country2">Land: </label> <input type="text" id="country2" /></fieldset>
<div id="mess"></div>

<script type="text/javascript">
	url = "countries/list";
	countries = new Array();
	countriesSWE = new Array();
	continents = new Array();
	continentsSWE = new Array();

	$(document).ready(function() {
		alert("start!");
		$.getJSON(("remotecall.php?url=" + url), function(data) {
			alert("längd=" + data.length);
			for ( var item in data) {

				countries.push(data[item]["countryname"]);
				swename = data[item]["countryswedishname"];
				if (swename != null && swename != "") {
					countriesSWE.push(swename);
				} else {
					countriesSWE.push(data[item]["countryname"]);
				}

				continents.push(data[item]["continentname"]);

				swecont = data[item]["continentswedishname"];
				if (swecont != null && swecont != "") {
					continentsSWE.push(swecont);
				} else {
					continentsSWE.push(data[item]["continentname"]);
				}
			}
			continents.sort();
			continents = $.unique(continents);
			continentsSWE.sort();
			continentsSWE = $.unique(continentsSWE);
			$("#country").autocomplete(countries, {
				matchContains : true,
				max : 20,
				scrollHeight : 200,
				width : 260
			});
			$("#countrySWE").autocomplete(countriesSWE, {
				width : 260
			});
			$("#continent").autocomplete(continents, {
				width : 260
			});
			$("#continentSWE").autocomplete(continentsSWE, {
				width : 260
			});
		});
		//alert("continents.length before:" + continents.length);
			//	alert("continentsSWE.length: before" + continentsSWE.length);
			//alert("continents.length after:" + continents.length);
			//alert("continentsSWE.length: after" + continentsSWE.length);

			/*for ( var i = 0; i < countries.length; i++) {
				$("#mess").append(countries[i] + ", ");
			}
			for ( var i = 0; i < continents.length; i++) {
				$("#mess").append(continents[i] + ", ");
			}*/

			$("#country2").autocomplete(
					"remotecall.php?url=" + url,
					{
						dataType : "json",
						parse : function(data) {
							return $.map(data, function(row) {
								return {
									data : row,
									value : row.countryname,
									result : row.countryname + " ("
											+ row.continentname + ")"
								}
							});
						},
						formatItem : function(item) {
							return item.countryname;
						},
						width : 260,
						selectFirst : false
					});

		});
</script>
</body>
</html>